<template>
    <div class="container">
        <div class="content" ref="content">
            <div class="top">
                <img src="../img/dot.png" alt="">
                报警参数分析
            </div>

            <div class="bottom">
                <div class="left">
                    <div class="l-title">
                        <img src="../img/arrow.png" alt="">
                        主要报警
                    </div>
                    <div class="l-top">
                        <div class="date">
                            <span>时间：</span>
                            <el-date-picker v-model="value2" type="monthrange" align="right" unlink-panels
                                range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"
                                :picker-options="pickerOptions" width="150px">
                            </el-date-picker>
                        </div>


                    </div>
                    <div class="l-bottom">
                        <div id="chart" class="chart">

                        </div>
                        <div class="b-table">
                            <el-table :data="tableData"  style="width: 80%;margin: 0 auto;"
                                :header-row-style="tableHeadStyle" :row-style="tableRowStyle" :cell-style="columnStyle"
                                :header-cell-style="headerStyle">
                                <el-table-column prop="params" label="参数">
                                </el-table-column>
                                <el-table-column prop="warning" label="报警数" width="70">
                                </el-table-column>
                                <el-table-column prop="month" label="最高月份" width="80">
                                </el-table-column>
                                <el-table-column prop="maxWarn" label="高报" width="70">
                                </el-table-column>
                                <el-table-column prop="minWarn" label="低报" width="70">
                                </el-table-column>
                                <el-table-column prop="wave" label="波动">
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>
                </div>
                <div class="right">
                    <div class="r-title">
                        密闭站与管汇采出液液量、温度报警分析
                    </div>
                    <div class="r-content">
                        <div class="chart1" id="chart1"></div>
                        <div class="chart2" id="chart2"></div>
                        <div class="chart3" id="chart3"></div>
                        <div class="chart4" id="chart4"></div>
                    </div>
                </div>
            </div>
        </div>

    </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
    name: 'ParamsDetect',
    data() {
        return {
            options: {
                dataset: {
                    source: [
                        ['score', 'amount', 'product'],
                        [89.3, 58212, '喷淋空冷器变频频率'],
                        [57.1, 78254, '值17喷淋空冷器变频频率'],
                        [74.4, 41032, '值16喷淋空冷器变频频率'],
                        [19.6, 91852, '值12喷淋空冷器变频频率'],
                        [10.6, 101852, '喷淋塔塔釜液位'],
                        [19.6, 91852, '压缩机主电机电流'],
                        [19.6, 91852, '喷淋塔塔釜温度'],
                        [57.1, 78254, '喷淋塔差压'],
                        [10.6, 101852, '器进口总管温度'],
                    ]
                },
                color: '#05b2d1',
                textStyle: {
                    color: '#fff'
                },
                grid: { containLabel: true },
                xAxis: { name: 'amount' },
                yAxis: { type: 'category' },
                series: [
                    {
                        type: 'bar',
                        encode: {
                            // Map the "amount" column to X axis.
                            x: 'amount',
                            // Map the "product" column to Y axis
                            y: 'product'
                        }
                    }
                ]
            },
            option1: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text: '集油线温度低报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color: '#5087ec',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option2: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text: '集油线温度高报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color: '#68bbc4',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option3: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text: '计量温度低报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color: '#4df755',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            option4: {
                xAxis: {
                    type: 'category',
                    data: ['单井温度低', '锅炉影响', '自喷井少', '远传问题']
                },
                yAxis: {
                    type: 'value'
                },
                textStyle: {
                    color: '#fff'
                },
                title: {
                    text: '计量温度高报警原因',
                    left: 'center',
                    textStyle: {
                        color: '#fff'
                    }
                },
                color: '#f7b153',
                series: [
                    {
                        data: [120, 200, 150, 80],
                        type: 'bar'
                    }
                ]
            },
            tableData: [{
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            }, {
                params: '超稠油蒸汽处理器汽相出口压力',
                warning: '47',
                month: '12月',
                maxWarn: '47',
                minWarn: '46',
                wave: '--'
            },],
            tableHeadStyle: {
                "font-size": "14px",
                color: "#fff",
            },
            tableRowStyle: {
                color: "#fff",
            },
        }
    },
    mounted() {
        this.$refs.content.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`;
        window.onresize = () => {
            this.$refs.content.style.transform = `scale(${this.getScale()}) translate(-50%,-50%)`;
        }
        this.initChart()
    },
    methods: {
        getScale(w = 1920, h = 1080) {
            const ww = window.innerWidth / w;
            const hh = window.innerHeight / h;
            return ww < hh ? ww : hh;
        },
        initChart() {
            var chartDom = document.getElementById('chart');
            var chart = echarts.init(chartDom);

            var chartDom1 = document.getElementById('chart1');
            var chart1 = echarts.init(chartDom1);

            var chartDom2 = document.getElementById('chart2');
            var chart2 = echarts.init(chartDom2);

            var chartDom3 = document.getElementById('chart3');
            var chart3 = echarts.init(chartDom3);

            var chartDom4 = document.getElementById('chart4');
            var chart4 = echarts.init(chartDom4);

            chart.setOption(this.options, true);
            chart1.setOption(this.option1, true);
            chart2.setOption(this.option2, true);
            chart3.setOption(this.option3, true);
            chart4.setOption(this.option4, true);
            window.addEventListener('resize', function () {
                chart.resize()
                chart1.resize()
                chart2.resize()
                chart3.resize()
                chart4.resize()
            })
        }
    }
}
</script>
<style lang='scss' scoped>
.container {
    width: 100%;
    height: 100vh;
    background-color: #0b1539;

    .content {
        position: absolute;
        width: 1920px;
        height: 1080px;
        left: 50%;
        top: 50%;
        transform-origin: left top;

        .top {
            background-image: url('../img/headbg.png');
            background-size: cover;
            background-repeat: no-repeat;
            height: 60px;
            color: #fff;
            font-size: 24px;
            font-weight: 700;
            line-height: 60px;
            font-style: italic;
            display: flex;
            align-items: center;


            img {
                margin: 0 10px;
            }
        }

        .bottom {
            display: flex;
            height: 100%;

            .left {
                width: 50%;
                height: 100%;
                margin-right: 10px;

                .l-title {
                    background-image: url('../img/titlebg.png');
                    background-repeat: no-repeat;
                    background-size: cover;
                    height: 40px;
                    color: #00ffff;
                    font-weight: 700;
                    line-height: 40px;
                    font-size: 20px;
                    display: flex;
                    padding-left: 40px;
                    align-items: center;
                    margin-bottom: 10px;
                    margin-top: 10px;

                    img {
                        margin: 0 10px;
                    }
                }


                .l-top {
                    // background-color: #fff;
                    // background-image: url('../img/chartbg.png');
                    // background-repeat: no-repeat;
                    // background-size: 100% 80%;
                    padding-top: 25px;
                    color: #fff;
                    font-size: 16px;
                    font-weight: 700;
                    // height: 50%;

                    .date {
                        width: 400px;
                        margin: 0 30px;
                    }


                }

                .l-bottom {
                    font-size: 16px;
                    font-weight: 700;
                    height: 50%;

                    .chart {
                        width: 100%;
                        height: 400px;
                        // background-color: red;
                    }

                    .b-table {
                        height: 100%;
                        // background-color: #fff;
                    }
                }
            }

            .right {
                width: 50%;
                height: 100%;

                .r-title {
                    text-align: center;
                    font-size: 24px;
                    font-weight: 700;
                    color: #fff;
                    margin-top: 20px;
                    margin-bottom: 40px;
                }

                .r-content {
                    display: flex;
                    justify-content: space-between;
                    // align-content: space-evenly;
                    // margin-top: 20px;
                    flex-wrap: wrap;
                    height: 100%;

                    div {
                        // margin-top: 5px;
                        background-image: url('../img/chartbg.png');
                        background-size: 400px 400px;
                        background-repeat: no-repeat;
                        width: 400px;
                        height: 400px;
                    }

                    div:nth-child(3) {
                        margin-top: -100px;
                    }

                    div:nth-child(4) {
                        margin-top: -100px;
                    }
                }
            }
        }
    }


}


::v-deep .el-range-editor--medium.el-input__inner {
    height: 35px;
}

::v-deep .el-date-editor--monthrange.el-input,
.el-date-editor--monthrange.el-input__inner {
    width: 200px;
    background-color: transparent;
    border: 1px solid #69abff;
}

::v-deep .el-range-editor--medium .el-range-input {
    background-color: transparent;
    color: #69abff;
}

::v-deep .el-range-input::placeholder {
    color: #69abff;
}

::v-deep .el-range-separator {
    color: #fff;
}

::v-deep .el-table,
::v-deep .el-table tr,
::v-deep .el-table th {
    background-color: transparent;
}

::v-deep .el-table--enable-row-hover .el-table__body tr:hover>td {
    background-color: #212e3e !important;
}

::v-deep .el-table__body tr.hover-row>td {
    background-color: #212e3e !important;
}
</style>